<template>
	<view class="container">
		<block v-if="isload">
			<view v-if="topimg" class="topimg">
				<image :src="topimg"></image>
			</view>
			<view class="product-container">
				<block v-if="datalist && datalist.length > 0">
					<dp-product-item v-if="type == '2'" :data="datalist" :menuindex="menuindex"></dp-product-item>
					<dp-product-itemlist v-if="type == '1'" :data="datalist" :menuindex="menuindex"
						topnumber="1"></dp-product-itemlist>
				</block>
				<nomore text="没有更多商品了" v-if="nomore"></nomore>
				<nodata text="没有查找到相关商品" v-if="nodata"></nodata>
				<loading v-if="loading"></loading>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,

			nomore: false,
			nodata: false,
			keyword: '',
			pagenum: 1,
			datalist: [],
			order: '',
			field: '',

			showfilter: "",
			cpid: 0,
			bid: 0,
			set: {},
			type: 0,
			topimg: ''
		};
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.bid = this.opt.bid ? this.opt.bid : 0;
		this.type = this.opt.type
		if (this.opt.keyword) {
			this.keyword = this.opt.keyword;
		}
		if (this.type == 1) {
			uni.setNavigationBarTitle({
				title: '独特爆款'
			});
		} else if (this.type == 2) {
			uni.setNavigationBarTitle({
				title: '活动推荐'
			});
		}
		this.getprolist();
	},
	onPullDownRefresh: function () {
		this.getprolist();
	},
	onReachBottom: function () {
		if (!this.nodata && !this.nomore) {
			this.pagenum = this.pagenum + 1;
			this.getprolist();
		}
	},
	methods: {
		getprolist: function () {
			var that = this;
			var pagenum = that.pagenum;
			var type = that.type;
			that.loading = true;
			that.nodata = false;
			that.nomore = false;
			var bid = that.opt.bid ? that.opt.bid : '';
			var needinit = pagenum == 1 ? 1 : 0
			app.post('Shop/getprolist', {
				pagenum: pagenum,
				type: type,
				bid: bid,
				needinit: needinit
			}, function (res) {
				that.loading = false;
				that.isload = true
				var data = res.data;
				if (pagenum == 1) {
					that.datalist = data;
					if (data.length == 0) {
						that.nodata = true;
					}
					if (that.type == 2) {
						that.topimg = res._initdata.indexcategoryimg
					} else if (that.type == 1) {
						that.topimg = res._initdata.indexcategoryimg2
					}
				} else {
					if (data.length == 0) {
						that.nomore = true;
					} else {
						var datalist = that.datalist;
						var newdata = datalist.concat(data);
						that.datalist = newdata;
					}
				}
			});
		},
	}
};
</script>
<style>
.search-container {
	position: fixed;
	width: 100%;
	background: #fff;
	z-index: 9;
	top: var(--window-top)
}

.topsearch {
	width: 100%;
	padding: 16rpx 20rpx;
}

.topsearch .f1 {
	height: 60rpx;
	border-radius: 30rpx;
	border: 0;
	background-color: #f7f7f7;
	flex: 1
}

.topsearch .f1 .img {
	width: 24rpx;
	height: 24rpx;
	margin-left: 10px
}

.topsearch .f1 input {
	height: 100%;
	flex: 1;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
}

.topsearch .f1 .camera {
	height: 72rpx;
	width: 72rpx;
	color: #666;
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40rpx;
}

.topsearch .search-btn {
	display: flex;
	align-items: center;
	color: #5a5a5a;
	font-size: 30rpx;
	width: 60rpx;
	text-align: center;
	margin-left: 20rpx
}

.search-navbar {
	display: flex;
	text-align: center;
	align-items: center;
	padding: 5rpx 0
}

.search-navbar-item {
	flex: 1;
	height: 70rpx;
	line-height: 70rpx;
	position: relative;
	font-size: 28rpx;
	font-weight: bold;
	color: #323232
}

.search-navbar-item .iconshangla {
	position: absolute;
	top: -4rpx;
	padding: 0 6rpx;
	font-size: 20rpx;
	color: #7D7D7D
}

.search-navbar-item .icondaoxu {
	position: absolute;
	top: 8rpx;
	padding: 0 6rpx;
	font-size: 20rpx;
	color: #7D7D7D
}

.search-navbar-item .iconshaixuan {
	margin-left: 10rpx;
	font-size: 22rpx;
	color: #7d7d7d
}

.search-history {
	padding: 24rpx 34rpx;
}

.search-history .search-history-title {
	color: #666;
}

.search-history .delete-search-history {
	float: right;
	padding: 15rpx 20rpx;
	margin-top: -15rpx;
}

.search-history-list {
	padding: 24rpx 0 0 0;
}

.search-history-list .search-history-item {
	display: inline-block;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 20rpx;
	margin: 0 10rpx 10rpx 0;
	background: #ddd;
	border-radius: 10rpx;
	font-size: 26rpx;
}

.filter-page {
	height: 100%;
}

.filter-scroll-view {
	margin-top: var(--window-top)
}

.search-filter {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 100%;
	flex-wrap: wrap;
	padding: 0;
}

.filter-content-title {
	color: #999;
	font-size: 28rpx;
	height: 30rpx;
	line-height: 30rpx;
	padding: 0 30rpx;
	margin-top: 30rpx;
	margin-bottom: 10rpx
}

.filter-title {
	color: #BBBBBB;
	font-size: 32rpx;
	background: #F8F8F8;
	padding: 60rpx 0 30rpx 20rpx;
}

.search-filter-content {
	display: flex;
	flex-wrap: wrap;
	padding: 10rpx 20rpx;
}

.search-filter-content .filter-item {
	background: #F4F4F4;
	border-radius: 28rpx;
	color: #2B2B2B;
	font-weight: bold;
	margin: 10rpx 10rpx;
	min-width: 140rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
	font-size: 24rpx;
	padding: 0 30rpx
}

.search-filter-content .close {
	text-align: right;
	font-size: 24rpx;
	color: #ff4544;
	width: 100%;
	padding-right: 20rpx
}

.search-filter button .icon {
	margin-top: 6rpx;
	height: 54rpx;
}

.search-filter-btn {
	display: flex;
	padding: 30rpx 30rpx 50rpx 30rpx;
	justify-content: space-between
}

.search-filter-btn .btn {
	width: 240rpx;
	height: 66rpx;
	line-height: 66rpx;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 33rpx;
	color: #2B2B2B;
	font-weight: bold;
	font-size: 24rpx;
	text-align: center
}

.search-filter-btn .btn2 {
	width: 240rpx;
	height: 66rpx;
	line-height: 66rpx;
	border-radius: 33rpx;
	color: #fff;
	font-weight: bold;
	font-size: 24rpx;
	text-align: center
}

.product-container {
	width: 100%;
	font-size: 26rpx;
	padding: 0 24rpx
}

.topimg {
	margin-bottom: 10rpx;
}

.topimg image {
	height: 360rpx;
	width: 100%;
}
</style>